(function () {
  // 步骤3：创建echarts实例
  let myChart = echarts.init(document.querySelector(".box:nth-of-type(1)"));

  // 步骤4：定义配置（指定图表的配置项和数据）
  let option = {
    // backgroundColor: '#2c343c',
    title: {
      text: "地区生产总值(亿元)",
      left: "center",
      top: 20,
      textStyle: {
        color: "#faff72",
      },
    },
    visualMap: {
      show: false,
      min: 60000,
      max: 110000,
      inRange: {
        colorLightness: [0, 1],
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    series: [
      {
        name: "总值",
        type: "pie",
        radius: "55%",
        center: ["50%", "50%"],
        data: [
          { value: 70116.4, name: "2015" },
          { value: 76086.1, name: "2016" },
          { value: 85900.9, name: "2017" },
          { value: 92595.4, name: "2018" },
          { value: 99631.5, name: "2019" },
        ].sort(function (a, b) {
          return a.value - b.value;
        }),
        roseType: "radius",
        label: {
          textStyle: {
            color: "#48c0a3",
            fontSize: 15,
          },
        },
        labelLine: {
          lineStyle: {
            color: "rgba(255, 255, 255, 0.3)",
          },
          smooth: 0.2,
          length: 10,
          length2: 20,
        },
        itemStyle: {
          color: "#003371",
          shadowBlur: 200,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
        animationType: "scale",
        animationEasing: "elasticOut",
        animationDelay: function (idx) {
          return Math.random() * 200;
        },
      },
    ],
  };

  // 步骤5：使用刚指定的配置项和数据显示图表
  myChart.setOption(option);

  // window.onresize = () => {
  //     myChart.resize()
  // }

  window.addEventListener("resize", () => {
    myChart.resize();
  });
})();
